<!-- subpkg_consult/description/index.vue -->

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						type="textarea"
						v-model="illnessInfo.illnessDesc"
						:styles="{ backgroundColor: '#f6f6f6' }"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<text @click="onTimeTagClick(item.value)" v-for="(item, index) in illnessTimes" :key="item.value" class="tag" :class="{ active: item.value == illnessInfo.illnessTime }">
						{{ item.text }}
					</text>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						class="tag"
						@click="onConsultFlagsChangeClick(item.value)"
						:class="{ active: item.value === illnessInfo.consultFlag }"
						v-for="item in consultFlags"
						:key="item.value"
					>
						{{ item.text }}
					</text>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					v-model="illnessInfo.pictures"
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
				/>
			</view>
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button :disabled="!nextStepEnable" @click="onNextStepClick" class="uni-button">下一步</button>
		</view>
	</scroll-page>
</template>

<script setup>
import { ref, computed } from 'vue';
import useConsultStore from '@/store/consult.js';
import { storeToRefs } from 'pinia';

const props = defineProps({
	type: String,
	illnessType: String,
	depId: String
});

const consultStore = useConsultStore();

const { illnessValue, illnessInfo } = storeToRefs(consultStore);

// 患病时长
const illnessTimes = [
	{ value: 1, text: '一周内' },
	{ value: 2, text: '一月内' },
	{ value: 3, text: '半年内' },
	{ value: 4, text: '半年以上' }
];

const consultFlags = [
	{ value: 0, text: '就诊过' },
	{ value: 1, text: '没有就诊过' }
];
// const illnessInfo = ref({
// 	illnessDesc: '',
// 	illnessTime: '',
// 	consultFlag: '',
// 	pictures: []
// });

if (illnessInfo.value.illnessDesc) {
	uni.showModal({
		title: '温馨提示',
		content: '是否恢复之前填写的病情信息?',
		confirmText: '确认',
		confirmColor: '#16c2a3',
		cancelColor: '#848484',
		success({ confirm }) {
			if (!confirm) illnessInfo.value = illnessValue.value;
		}
	});
}

const onTimeTagClick = (v) => {
	illnessInfo.value.illnessTime = v;
};

const onConsultFlagsChangeClick = (v) => {
	illnessInfo.value.consultFlag = v;
};

const nextStepEnable = computed(() => {
	return illnessInfo.value.illnessDesc !== '' && illnessInfo.value.illnessTime !== '' && illnessInfo.value.consultFlag !== '';
});

// 下一步
const onNextStepClick = () => {
	consultStore.type = props.type;
	consultStore.illnessType = props.illnessType;
	consultStore.depId = props.depId;

	uni.navigateTo({
		url: '/subpkg_consult/patient/patient'
	});
};
</script>

<style lang="scss">
// subpkg_consult/description/index.scss
.description-page {
	padding: 30rpx 30px 200rpx;
}

.doctor-online {
	display: flex;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #ededed;

	.doctor-avatar {
		width: 110rpx;
		height: 110rpx;
	}

	.doctor-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.name {
		line-height: 1;
		padding-left: 20rpx;
		font-size: 32rpx;
		color: #121826;
	}

	.message {
		line-height: 1.5;
		padding: 20rpx;
		margin: 20rpx 0;
		color: #6f6f6f;
		font-size: 26rpx;
		border-radius: 20rpx;
		background-color: #f6f6f6;
	}

	.tips {
		display: flex;
		align-items: center;
		color: #6f6f6f;
		font-size: 24rpx;
	}

	.icon-shield {
		font-size: 28rpx;
		margin-right: 5rpx;
	}
}

.patient-info {
	margin-top: 30rpx;

	.description {
		width: 100%;
		height: 240rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #121826;
		background-color: #f6f6f6;
	}

	.title {
		margin: 30rpx 0 10rpx;
		font-size: 28rpx;
		color: #3c3e42;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;

		.tag {
			line-height: 1;
			padding: 16rpx 20rpx 14rpx;
			margin: 20rpx 20rpx 20rpx 0;
			font-size: 26rpx;
			border-radius: 10rpx;
			color: #3c3e42;
			border: 1rpx solid transparent;
			background-color: #f6f6f6;

			&.active {
				color: #2cb5a5;
				border-color: #2cb5a5;
				background-color: rgba(44, 181, 165, 0.1);
			}
		}
	}
}

.patient-picture {
	margin-top: 30rpx;

	:deep(.uni-file-picker__header) {
		padding-top: 0;
		padding-bottom: 30rpx;
	}

	:deep(.file-title) {
		font-size: 28rpx;
		color: #3c3e42;
	}

	:deep(.file-count) {
		font-size: 28rpx;
	}

	:deep(.file-picker__box-content) {
		background-color: #f6f6f6;
		border: none !important;
		border-radius: 10rpx !important;
	}

	:deep(.icon-add) {
		width: 60rpx;
		height: 4rpx;
		background-color: #ccc;
	}

	:deep(.icon-del-box) {
		right: -3px !important;
		top: -3px !important;
		background-color: rgba(0, 0, 0, 0.3) !important;
		transform: scale(0.6) rotate(-45deg) !important;
	}
}

.next-step {
	position: sticky;
	right: 0;
	left: 0;
	bottom: env(safe-area-inset-bottom);
	z-index: 100;
	padding: 30rpx 40rpx;
	background-color: #fff;
}
</style>
